/**
 * 排行榜标签页组件
 */

import React from 'react';
import { RankingType } from '@shared/types/market';

interface RankingTabsProps {
  activeTab: RankingType;
  onChange: (tab: RankingType) => void;
}

const tabs: { key: RankingType; label: string; icon: string }[] = [
  { key: 'top_gainers', label: '涨幅榜', icon: '📈' },
  { key: 'top_losers', label: '跌幅榜', icon: '📉' },
  { key: 'top_turnover', label: '成交额榜', icon: '💰' },
];

const RankingTabs: React.FC<RankingTabsProps> = ({ activeTab, onChange }) => {
  return (
    <div
      style={{
        display: 'flex',
        gap: '8px',
        marginBottom: '16px',
        borderBottom: '2px solid #f0f0f0',
      }}
    >
      {tabs.map((tab) => (
        <button
          key={tab.key}
          onClick={() => onChange(tab.key)}
          style={{
            flex: 1,
            padding: '12px 16px',
            border: 'none',
            backgroundColor: 'transparent',
            color: activeTab === tab.key ? '#1890ff' : '#666',
            fontWeight: activeTab === tab.key ? '600' : '400',
            fontSize: '14px',
            cursor: 'pointer',
            position: 'relative',
            transition: 'all 0.3s',
            borderBottom: activeTab === tab.key ? '2px solid #1890ff' : '2px solid transparent',
            marginBottom: '-2px',
          }}
          onMouseEnter={(e) => {
            if (activeTab !== tab.key) {
              e.currentTarget.style.color = '#333';
            }
          }}
          onMouseLeave={(e) => {
            if (activeTab !== tab.key) {
              e.currentTarget.style.color = '#666';
            }
          }}
        >
          <span style={{ marginRight: '6px' }}>{tab.icon}</span>
          {tab.label}
        </button>
      ))}
    </div>
  );
};

export default RankingTabs;

